.s-skill-cube-hide h2{
	font-size: 22px;
	color: inherit;
}
.s-skill-cube-wrapper {
	min-width: 700px;
	max-width: 1024px;
	margin: 30px auto;
}
.s-skill-cube-wrapper ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
.s-skill-cube-wrapper ul li {
	width: 150px;
	height: 150px;
	margin: 10px;
	padding: 0;
	-webkit-perspective: 300px;
	perspective: 300px;
}
.s-skill-cube-wrapper .s-skill-cube {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 50% 50% -75px;
	transform-origin: 50% 50% -75px;
	-webkit-animation: .3s ease-out forwards;
	animation: .3s ease-out forwards;
}
.s-skill-cube-wrapper .s-skill-cube .s-skill-cube-hide,.s-skill-cube-wrapper .s-skill-cube .s-skill-cube-show,.s-skill-cube-wrapper .s-skill-cube .s-skill-cube-show img {
	width: 100%;
	height: 100%;
}
.s-skill-cube-wrapper .s-skill-cube .s-skill-cube-show div {
	font-size: 40px;
	font-weight: 700;
	text-align: center;
	line-height: 150px;
	color: #fff;
	text-shadow: 2px 2px 2px #000;
	background: linear-gradient(#ff4500,orange);
}
.s-skill-cube-wrapper .s-skill-cube .s-skill-cube-hide {
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
	color: #fff;
	-webkit-transform: translateZ(-1px);
	transform: translateZ(-1px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.s-skill-cube-wrapper .s-skill-cube .s-skill-cube-hide h2 {
	text-shadow: 2px 2px 2px #000;
	padding: 10px;
}
.s-skill-cube-wrapper .s-skill-cube .s-skill-cube-hide p {
	padding: 5px 10px;
	font-size: 14px;
}
.s-skill-cube-wrapper .in-top .s-skill-cube .s-skill-cube-hide,.s-skill-cube-wrapper .out-top .s-skill-cube .s-skill-cube-hide {
	-webkit-transform-origin: bottom;
	transform-origin: bottom;
	-webkit-transform: translate3d(0,-100%,0) rotateX(90deg);
	transform: translate3d(0,-100%,0) rotateX(90deg);
}
.s-skill-cube-wrapper .in-top .s-skill-cube {
	-webkit-animation-name: in-top;
	animation-name: in-top;
}
.s-skill-cube-wrapper .out-top .s-skill-cube {
	-webkit-animation-name: out-top;
	animation-name: out-top;
}
/* 各个方向的动画 */

@-webkit-keyframes in-top {
	0% {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}

	to {
		-webkit-transform: rotate3d(-1,0,0,90deg);
		transform: rotate3d(-1,0,0,90deg);
	}
}

@keyframes in-top {
	0% {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}

	to {
		-webkit-transform: rotate3d(-1,0,0,90deg);
		transform: rotate3d(-1,0,0,90deg);
	}
}

@-webkit-keyframes out-top {
	0% {
		-webkit-transform: rotate3d(-1,0,0,90deg);
		transform: rotate3d(-1,0,0,90deg);
	}

	to {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}
}

@keyframes out-top {
	0% {
		-webkit-transform: rotate3d(-1,0,0,90deg);
		transform: rotate3d(-1,0,0,90deg);
	}

	to {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}
}

.s-skill-cube-wrapper .in-bottom .s-skill-cube .s-skill-cube-hide,.s-skill-cube-wrapper .out-bottom .s-skill-cube .s-skill-cube-hide {
	-webkit-transform-origin: top;
	transform-origin: top;
	-webkit-transform: translate3d(0,100%,0) rotateX(-90deg);
	transform: translate3d(0,100%,0) rotateX(-90deg);
}

.s-skill-cube-wrapper .in-bottom .s-skill-cube {
	-webkit-animation-name: in-bottom;
	animation-name: in-bottom;
}

.s-skill-cube-wrapper .out-bottom .s-skill-cube {
	-webkit-animation-name: out-bottom;
	animation-name: out-bottom;
}

@-webkit-keyframes in-bottom {
	0% {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}

	to {
		-webkit-transform: rotateX(90deg);
		transform: rotateX(90deg);
	}
}

@keyframes in-bottom {
	0% {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}

	to {
		-webkit-transform: rotateX(90deg);
		transform: rotateX(90deg);
	}
}

@-webkit-keyframes out-bottom {
	0% {
		-webkit-transform: rotateX(90deg);
		transform: rotateX(90deg);
	}

	to {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}
}

@keyframes out-bottom {
	0% {
		-webkit-transform: rotateX(90deg);
		transform: rotateX(90deg);
	}

	to {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}
}

.s-skill-cube-wrapper .in-left .s-skill-cube .s-skill-cube-hide,.s-skill-cube-wrapper .out-left .s-skill-cube .s-skill-cube-hide {
	-webkit-transform-origin: right;
	transform-origin: right;
	-webkit-transform: translate3d(-100%,0,0) rotateY(-90deg);
	transform: translate3d(-100%,0,0) rotateY(-90deg);
}

.s-skill-cube-wrapper .in-left .s-skill-cube {
	-webkit-animation-name: in-left;
	animation-name: in-left;
}

.s-skill-cube-wrapper .out-left .s-skill-cube {
	-webkit-animation-name: out-left;
	animation-name: out-left;
}

@-webkit-keyframes in-left {
	0% {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}

	to {
		-webkit-transform: rotateY(90deg);
		transform: rotateY(90deg);
	}
}

@keyframes in-left {
	0% {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}

	to {
		-webkit-transform: rotateY(90deg);
		transform: rotateY(90deg);
	}
}

@-webkit-keyframes out-left {
	0% {
		-webkit-transform: rotateY(90deg);
		transform: rotateY(90deg);
	}

	to {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}
}

@keyframes out-left {
	0% {
		-webkit-transform: rotateY(90deg);
		transform: rotateY(90deg);
	}

	to {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}
}

.s-skill-cube-wrapper .in-right .s-skill-cube .s-skill-cube-hide,.s-skill-cube-wrapper .out-right .s-skill-cube .s-skill-cube-hide {
	-webkit-transform-origin: left;
	transform-origin: left;
	-webkit-transform: translate3d(100%,0,0) rotateY(90deg);
	transform: translate3d(100%,0,0) rotateY(90deg);
}

.s-skill-cube-wrapper .in-right .s-skill-cube {
	-webkit-animation-name: in-right;
	animation-name: in-right;
}

.s-skill-cube-wrapper .out-right .s-skill-cube {
	-webkit-animation-name: out-right;
	animation-name: out-right;
}

@-webkit-keyframes in-right {
	0% {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}

	to {
		-webkit-transform: rotate3d(0,-1,0,90deg);
		transform: rotate3d(0,-1,0,90deg);
	}
}

@keyframes in-right {
	0% {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}

	to {
		-webkit-transform: rotate3d(0,-1,0,90deg);
		transform: rotate3d(0,-1,0,90deg);
	}
}

@-webkit-keyframes out-right {
	0% {
		-webkit-transform: rotate3d(0,-1,0,90deg);
		transform: rotate3d(0,-1,0,90deg);
	}

	to {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}
}

@keyframes out-right {
	0% {
		-webkit-transform: rotate3d(0,-1,0,90deg);
		transform: rotate3d(0,-1,0,90deg);
	}

	to {
		-webkit-transform: rotate3d(0,0,0,0);
		transform: rotate3d(0,0,0,0);
	}
}
